<!--
 * @Descripttion: 
 * @Author: Kevin
 * @Date: 2022-06-14 10:58:57
 * @LastEditors: Tommy Chen
 * @LastEditTime: 2024-06-01
-->
<template>
  <div class="editor-layout-wrapper" v-show="isVisible">
    <!-- <rj-drawer
    placement="right"
    :visible="isVisible"
    :width="'100VW'"
    :maskClosable="false"
    :keyboard="false"
    :getContainer="'.mainBox'"
    :wrap-style="{ position: 'absolute', textAlign: 'left' }"
  > -->
    <h3 class="editor-layout-title" v-if="title">
      <icon-font type="ic-arrow_return_m" @click="onClose" />
      {{ title }}
    </h3>
    <slot name="steps" v-if="steps.length > 0">
      <a-steps class="editor-layout-step" :current="currentStep" size="small">
        <a-step :title="step" v-for="(step, i) in steps" :key="'step' + i" />
      </a-steps>
    </slot>
    <div class="editor-layout-body">
      <slot></slot>
    </div>
    <div class="editor-layout-footer" v-if="hasFoot">
      <slot name="foot"></slot>
    </div>
    <!-- </rj-drawer> -->
  </div>
</template>

<script>
// import { RjDrawer } from '@components';
export default {
  name: 'editorLayout',
  // components: {
  //   RjDrawer,
  // },
  props: {
    title: {
      //步骤
      type: String,
      default: () => null,
    },
    steps: {
      //步骤
      type: Array,
      default: () => [],
    },
    currentStep: {
      //当前步骤
      type: Number,
      default: 0,
    },
    isVisible: {
      //是否显示
      type: Boolean,
      default: false,
    },
    hasFoot: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {};
  },
  watch: {},
  computed: {},
  methods: {
    onClose() {
      this.$emit('close');
    },
  },
};
</script>

<style lang="less" scoped>
.editor-layout-title {
  padding: 16px;
  font-size: 16px;
  color: #000000e5;
  display: flex;
  align-items: center;
  margin-bottom: 0;
  gap: 8px;
  i {
    font-size: 20px;
  }
}
.editor-layout-wrapper {
  text-align: left;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  background: white;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.editor-layout-footer {
  border-top: 1px solid @component-stroke;
  padding: 16px;
  display: flex;
  gap: 16px;
  width: 100%;
  background: white;
}
.editor-layout-body {
  padding: 16px;
  padding-top: 0;
  background: white;
  flex-grow: 1;
  overflow-y: auto;
}
.editor-layout-step {
  padding: 0 16px;
  margin-bottom: 24px;
}
/deep/.ant-steps-item {
  max-width: 300px;
}
</style>
